import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appFontHover]'
})
export class FontHoverDirective {
  
  constructor(private el: ElementRef) { }

  //@Input() defaultColor = '';

  @Input() appFontHover = '';

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.appFontHover || 'blue');
    this.el.nativeElement.style.textDecoration = 'underline'
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight('');
    this.el.nativeElement.style.textDecoration = 'none'
  }

  private highlight(color: string) {
    this.el.nativeElement.style.color = color;
  }
}
